<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>姓名案例_methods方法实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">
            <input type="text" placeholder="请输入姓" v-model="firstName"><br><br>
            <input type="text" placeholder="请输入名" v-model="lastName"><br><br>
            <span>{{fullName()}}</span><br>
            <span>{{fullName()}}</span><br>
            <span>{{fullName()}}</span><br>
            <span>{{fullName()}}</span><br>
            <span>{{fullName()}}</span><br>
        </div>

        <script>
            const vm = new Vue({
                el:'#root',
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                methods: {
                  fullName() {
                    console.log("正在获取fullName")
                    return this.firstName + "-" + this.lastName
                  }
                }
            })

        </script>
    </body>
</html>